<template>
    <div>
       <p>{{ message }}</p>
       <button @click="upDateMessage">更新信息</button>

       <hr>
       <div v-show="block">
        <Children></Children>
       </div>
       <button @click="isBlock">控制子组件显示或者隐藏</button>
    </div>
</template>



<script setup>
import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from 'vue';
import Children from './components/Children.vue';
const message=ref('Hell Vue3')

const block=ref(true)


function upDateMessage(){
    message.value='Hello World'
}


function isBlock(){
    block.value=!block.value
}

onBeforeMount(()=>{
    console.log('挂载前');
})

console.log('创建');

onMounted(()=>{
    console.log('挂载后');
    
})

onBeforeUpdate(()=>{
    console.log('更新前');
})


onUpdated(()=>{
    console.log('更新后');
    
})


</script>



<style scoped></style>